import { defineComponent } from "vue";
import Module from "@/views/dashboard/data/components/Module";
import icon_devider from "./assets/4260.svg";
import icon from "./assets/4249.svg";
import bg_bubble from "./assets/33.webp";

export default defineComponent({
	name: "Card1",
	setup() {
		return () => (
			<Module title={"菜单一"}>
				<div class={"w-full h-full flex flex-col item.scss-center justify-center px-[8%] box-border"}>
					<div class={"text-white text-[14px] flex flex-row justify-center items-center"}>
						<div>已接入设备</div>
						<div class={"text-[22px] text-[#4DAFFB]"}>400</div>
						<div>台</div>
					</div>
					<img class={"w-full "} src={icon_devider} alt=""></img>
					<div class={"w-full flex flex-row justify-between text-white"}>
						<div class={"w-1/2 flex flex-col item.scss-start text-[#56EBF1] text-[13px]"}>
							<div class={"text-[13px] text-[#95A6FC] my-2"}>设备类型一</div>
							<div class={"my-0.5 flex flex-row w-[100%]"}>
								{"摄像头 水位计 流量计".split(" ").map(e => (
									<div class={"w-1/3 text-nowrap"}>{e}</div>
								))}
							</div>
							<div class={"my-0.5 flex flex-row w-[100%]"}>
								{"水浸 烟雾 电流".split(" ").map(e => (
									<div class={"w-1/3  text-nowrap"}>{e}</div>
								))}
							</div>
						</div>
						<div class={"w-1/2 flex flex-col item.scss-end text-[#56EBF1] text-[13px]"}>
							<div class={"text-[13px] text-[#95A6FC] my-2"}>产线类型二</div>
							<div class={"my-0.5 flex flex-row w-[100%]"}>
								{"展厅 物料 组装车间".split(" ").map(e => (
									<div class={"w-1/3 text-nowrap text-right"}>{e}</div>
								))}
							</div>
							<div class={" my-0.5 flex flex-row w-[100%]"}>
								{"办公室 配电房 电焊车间".split(" ").map(e => (
									<div class={"w-1/3 text-nowrap text-right"}>{e}</div>
								))}
							</div>
						</div>
					</div>
					<div class={"w-full flex flex-col items-center text-white relative"}>
						<div class={"flex flex-row items-end"}>
							<div class={"text-[50px] leading-[46px]"}>6</div>
							<div class={"text-[14px] leading-[14px]"}>个</div>
						</div>
						{/*累了*/}
						<Bubble class={"bottom-2 left-[-30px]"} />
						<Bubble class={"bottom-0 left-2 "} />
						<Bubble class={"bottom-5 left-10"} />
						<Bubble class={"bottom-2 left-20"} />
						<Bubble class={"bottom-8 left-28"} />
						<Bubble class={"bottom-2 right-[-30px]"} />
						<Bubble class={"bottom-0 right-2 "} />
						<Bubble class={"bottom-5 right-10"} />
						<Bubble class={"bottom-2 right-20"} />
						<Bubble class={"bottom-8 right-28"} />
						<img class={"w-1/3"} src={icon} alt=""></img>
					</div>
				</div>
			</Module>
		);
	}
});

const Bubble = defineComponent({
	name: "Bubble",
	setup() {
		return () => (
			<div class={"w-[40px] h-[40px] absolute "}>
				<img class={"w-full h-full "} src={bg_bubble} alt="" />
				<div class={"text-[#28F1A8] text-[13px] w-fit h-fit leading-[13px] absolute  top-0 right-0 left-0 bottom-0 m-auto"}>
					水浸
				</div>
			</div>
		);
	}
});
